---
import { Card as BaseCard, Heading } from "#components/primitives";
import { Icon } from "astro-icon/components";
import clsx from "clsx";

interface Props {
  icon?: string;
  label: string;
  gradient?: boolean;
  link: string;
}

const { props } = Astro;
---

<a
  href={props.link}
  class="not-prose cursor-pointer block my-4"
  target={props.link.startsWith("http") ? "_blank" : "_self"}
  ><BaseCard
    class={clsx(
      "w-full flex flex-col m-0 gap-2 items-start h-full border-0 p-4",
      props.gradient && "hover:bg-gradient-to-bl",
      !props.gradient && "bg-gray-100 dark:bg-gray-900 !hover:bg-gray-200 !dark:hover:bg-gray-700"
    )}
    color={props.gradient ? "primary" : "base"}
  >
    <div class="flex justify-center items-center w-full">
      {
        props.icon && (
          <div class="pr-1">
            <Icon name={props.icon} class="h-6 w-6" />
          </div>
        )
      }
      <Heading level={3} class="pl-1 flex-1 font-bold">
        {props.label}
      </Heading>
    </div>
    <div class="flex flex-col justify-center items-start gap-2 w-full">
      <slot />
    </div>
  </BaseCard>
</a>
